<template>
  <q-page class="home-page row no-wrap" style="width: 100%">
    <page-left-menu
      class="page-menu"
      :title="$t('home.title')"
      color="#00B5BC"
      :menus="menus"
      @onChange="onMenuChange"
    />
    <q-scroll-area class="page-scroll bg-main" :thumb-style="{ zIndex: '999' }">
      <template v-if="currentUser">
        <q-banner
          inline-actions
          class="text-white bg-red"
          v-if="
            !currentUser.emailVerification && currentUser.isVerifiedEmailSent
          "
        >
          Please check your email and follow the instructions to verify your
          account.
          <template v-slot:action>
            <q-btn flat color="white" label="Resend" />
          </template>
        </q-banner>
      </template>
      <div class="row fit justify-center items-center">
        <router-view />
      </div>
    </q-scroll-area>
  </q-page>
</template>
<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar';
import PageLeftMenu from 'layouts/components/PageLeftMenu.vue';
import Me from 'src/models/Me';
import { useUserStore } from 'src/stores/user-store';

export default defineComponent({
  name: 'Home',
  components: {
    PageLeftMenu,
  },
  setup() {
    const guestMenus = [
      { label: 'home.featured', routeName: 'Featured' },
      { label: 'home.newTranslations', routeName: 'NewTranslations' },
      {
        label: 'home.discover',
        routeName: 'Discover',
        icon: 'mdi-help-circle-outline',
      },
    ];
    const loginMenus = [
      { label: 'home.featured', routeName: 'Featured' },
      { label: 'home.creatorsOrFollow', routeName: 'Followed' },
      { label: 'home.newTranslations', routeName: 'NewTranslations' },
      {
        label: 'home.discover',
        routeName: 'Discover',
        icon: 'mdi-help-circle-outline',
      },
    ];
    const userStore = useUserStore();
    const router = useRouter();
    const $q = useQuasar();
    const menus = ref(guestMenus);

    const currentUser = computed(() => userStore.currentUser);
    if (currentUser.value) {
      menus.value = loginMenus;
    } else {
      menus.value = guestMenus;
    }
    watch(currentUser, () => {
      if (currentUser.value) {
        menus.value = loginMenus;
      } else {
        menus.value = guestMenus;
      }
    });
    return {
      currentUser,
      menus,
      onMenuChange(info: any) {
        router.replace({ name: info.routeName });
      },
    };
  },
});
</script>
